好的讓我們開始吧！

檢視頁面

首先我們先檢視一次整個頁面，可以發現一些顯而易見的問題，比如說顏色眾多、資訊架構雜亂、一些 Icon 並沒有統一，還有比較嚴重的跑版沒有處理等等，我們一一來分析。

Frontend 面

先就前端工程面而言，會看到底下這幾個問題：

1. 導覽列有很明顯的破版。長度不夠寬，所以新聞稿（press release）被擠到底下去了。轉成中文後導覽列長度一短就好很多。

2. 頁面中出現了兩個 Logo 。當滑鼠 hover 上去時是呈現 cursor 的狀態，但觀察原始碼連結是空的，這樣可能會讓使用者誤會。另外，以網頁設計的角度而言，Logo 應該只能有一個，若要使用兩個 Logo 可能要區分一下主次關係，就像是人有姓名和小名。

3. 第三個是轉換成不同的語系之後，衛星雲圖這邊就有明顯的破版，標題因為換成較龐大的中文字被擠壓到最上面了。比起製作 RWD 時需要注意的版面問題，「語系轉換」導致的破版其實很難一時之間察覺，或根本沒有想到，這也很值得注意喔。

4. Icon 被橫向拉寬變形。在網頁中的圖片使用width: 100% 真的要很注意，小 Icon 盡量給他一個 width和 min-width。
   

Design 面

前端面就不多探討了，設計的部分開始囉。

1. 網頁的橫向對齊只有三種，置中、置左、置右，內容呈現方形塊狀，尤其是這種資訊量較大的網頁，盡量不要有脫板行為。
   

   這個 Icon 群組看不出是要對齊左邊的字，還是右邊的輸入框。

2. 底下的藍底紅字配色會使易讀性降低：導覽列的配色藍字在紅筆上是一個對於用戶非常不友善的配色，不僅難以閱讀而且紅底本身是有點刺眼的，其實可以降低它的飽和度或是改用白字
   

3. 再來看底下的 icon。
   左邊地圖中的icon跟右邊選單裡面的icon是不統一的樣式，單色、多色、立體、線段等等參雜，統一後會讓整個使用體驗會更加的一致。